<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>GiftSeeker</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link
      href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="head">
      <div id="head_decor"></div>
      <div class="logo"></div>
      <ul class="menu">
        <li class="active" data-menu-id="services">
          <span data-lang="ui.menu.services"> </span>
        </li>
        <li data-menu-id="settings">
          <span data-lang="ui.menu.settings"> </span>
        </li>
      </ul>
      <div class="update-available" data-lang-title="ui.upd_progress">
        <span class="fa fa-download"></span>
      </div>
      <div class="window-buttons">
        <span
          class="minimizer fa fa-window-minimize window-action-button"
          data-action="minimize"
        ></span>
        <span
          class="closer fa fa-times window-action-button"
          data-action="close"
        ></span>
      </div>
      <div class="user-bar">
        <div class="avatar"></div>
        <div class="btn username no-active"></div>
        <div
          class="btn logout-button"
          data-tippy-content="Sign out"
          data-tippy-translate="ui.logout"
        >
          <span class="fa fa-sign-out-alt"></span>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="content-item active" data-menu-id="services">
        <div class="services_switcher">
          <div class="services-icons"></div>
          <div class="expander">
            <div class="span-wrap">
              <span class="fa fa-angle-double-right"></span>
              <span class="fa fa-angle-double-left"></span>
            </div>
          </div>
        </div>
        <div class="services-panels"></div>
      </div>
      <div class="content-item" data-menu-id="settings">
        <div class="left-side">
          <label for="useragent">UserAgent</label>
          <textarea id="useragent"></textarea>
          <div class="info-links"></div>
        </div>
        <div class="right-side">
          <div class="input-wrap select">
            <select class="setter" id="lang"></select>
          </div>
          <div class="input-wrap checkbox">
            <input id="use_system_browser" class="setter" type="checkbox" />
            <label
              for="use_system_browser"
              data-lang="settings.use_system_browser"
            >
            </label>
          </div>
          <div class="input-wrap checkbox">
            <input id="start_with_os" class="setter" type="checkbox" />
            <label for="start_with_os" data-lang="settings.start_with_os">
            </label>
          </div>
          <div class="input-wrap checkbox">
            <input id="start_minimized" class="setter" type="checkbox" />
            <label for="start_minimized" data-lang="settings.start_minimized">
            </label>
          </div>
          <div class="input-wrap checkbox">
            <input id="minimize_on_close" class="setter" type="checkbox" />
            <label
              for="minimize_on_close"
              data-lang="settings.minimize_on_close"
            >
            </label>
          </div>
          <div class="input-wrap checkbox">
            <input id="autostart" class="setter" type="checkbox" />
            <label for="autostart" data-lang="settings.autostart"> </label>
          </div>
          <div class="build no-selectable">
            <span data-lang="settings.build_version"></span>
            <span class="version"></span>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="scripts/windows/main.js"></script>
    <script type="module" src="scripts/services.js"></script>
    <script type="module">
      const { ipcRenderer } = require("electron");
      import { updatePagePhrases } from "./scripts/language.js";
      import browser from "./scripts/browser.js";
      document.addEventListener(
        "click",
        ({ target }) => {
          if (!target.matches(".open-website")) return;
          if (target.dataset.link) browser.openUrl(target.dataset.link);
        },
        false,
      );

      ipcRenderer.on("window-initial-data", async (event, { translations }) => {
        updatePagePhrases(translations.phrases);
      });
    </script>
  </body>
</html>
